import React, { useEffect } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { useThemeStore } from './stores/themeStore';
import { useAppStore } from './stores/appStore';
import AppRouter from './router';
import './App.css';

const App: React.FC = () => {
  const { theme, initTheme } = useThemeStore();
  const { initApp } = useAppStore();

  useEffect(() => {
    // 初始化应用
    initApp();
    initTheme();

    // 监听窗口事件
    if (window.electronAPI) {
      window.electronAPI.window.onMaximized(() => {
        // 处理窗口最大化事件
      });

      window.electronAPI.window.onUnmaximized(() => {
        // 处理窗口取消最大化事件
      });

      window.electronAPI.window.onFocused(() => {
        // 处理窗口获得焦点事件
      });

      window.electronAPI.window.onBlurred(() => {
        // 处理窗口失去焦点事件
      });
    }

    // 清理函数
    return () => {
      if (window.electronAPI && window.electronAPI.removeAllListeners) {
        window.electronAPI.removeAllListeners('window-maximized');
        window.electronAPI.removeAllListeners('window-unmaximized');
        window.electronAPI.removeAllListeners('window-focused');
        window.electronAPI.removeAllListeners('window-blurred');
      }
    };
  }, [initApp, initTheme]);

  return (
    <div className={`app ${theme}`}>
      <Router>
        <AppRouter />
      </Router>
    </div>
  );
};

export default App;